<template>
	<view class="app"> 
		<u-sticky>
			<view class="order-tabs">
				<u-tabs :is-scroll="false" active-color="#19be6b"  :list="orderStatus" name="orderTabs" :current="tabIndex" @change="orderTabsChange"></u-tabs>
			</view>
		</u-sticky> 
		<view class="order-list">
			<u-card  v-for="(item,index) in list"  @head-click="gotoOrderInfo(item)" @body-click="gotoOrderInfo(item)" :key="item.id" :title="'订单编号：' + item.order_no" :sub-title="orderStatusName[item.status]"  title-size="24" sub-title-size="24">
				<view  slot="body">
					<view class="order-info-row">
						<label>回收类别：</label>
						<text>{{item.book_category?item.book_category:'其他'}}</text>
					</view> 
					<view class="order-info-row">
						<label>取件地址：</label>
						<text>{{item.address.address}}</text>
					</view>
					<view class="order-info-row">
						<label>下单时间：</label>
						<text>{{item.createtime}}</text>
					</view>
					<view class="order-info-row">
						<label>预约时间：</label>
						<text>{{item.book_time?item.book_time:'尽快'}}</text>
					</view>
				</view>
				<view class="order-btn-row" slot="foot" > 
					<view class="order-btn-right" v-if="[-1,2].indexOf(item.status) < 0"> 
						<u-button  plain size="mini" v-if="item.status == 1" type="primary" @click="gotoRecycler(item.id)" >开始回收</u-button>
						<u-button  plain size="mini" v-if="item.status == 1" type="error" @click="cancelOrder(item.id)" >取消接单</u-button> 
					</view>
					<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;" v-if="item.status == 2">
						<label>总结算金额</label>
						<label>￥{{item.order_price}}</label>
					</view>
				</view>
			</u-card>  
			<u-loadmore :status="loadMoreStatus" @loadmore="loadList"/>
			<c-safe-bottom ></c-safe-bottom>
			<view style="height: 100rpx;"></view>
		</view>
		
	</view>
</template>
<style scoped>  
	// #ifdef H5
	.safe-bottom{ height: 0rpx;}
	// #endif 
	.order-list{}
	.order-btn-row{ display: flex;}
	.order-btn-right{flex:1;text-align: right;}
	.order-info-row{  display: flex; align-items: center;margin-bottom: 10rpx;}
	.order-info-row label{ flex-shrink: 0;}
	.order-info-row text{ flex:1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
	/deep/ .order-btn-right .u-btn{margin-left: 20rpx !important;}
	/deep/ .u-load-more-wrap{margin:20rpx !important;}
	.recycler-site{ font-size: 34rpx;background-color: #19be6b;color:white;position: fixed;bottom:0;padding:20rpx;width: 100%;z-index: 9999; }
	.recycler-site-row{display: flex;align-items: center; justify-content: space-between;}
	.recycler-site-item{display: flex;align-items: center;}
	/deep/  .uicon-map{margin-right: 20rpx;}
</style>
<script>  
	export default {
		data() {
			return {
				tabIndex:0,
				loadMoreStatus:"loadmore",
				orderStatus:[ {
					name: '已接单',
					value:'1'
				}, {
					name: '已完成',
					value:'2'
				}],
				orderStatusName:{
					'1':'已接单','2':'已完成',
				},
				orderParams:{
					pagesize:10,
					page:1,   
					status:0
				},
				list:[],
				showSiteSelect:false,
				siteList:[],
				nowSite:{}
			}
		}, 
		computed:{
			 
		},
		methods:{
			// getOrderTabs(){
			// 	this.$u.api.recycler.getOrderTabs({
			// 		siteId:this.nowSite.value
			// 	}).then(res => {
			// 		this.orderStatus = res.data
			// 		this.orderStatus.forEach(item => {
			// 			this.orderStatusName[item.value.toString()] = item.name
			// 		})
			// 	})
			// },
			orderTabsChange(e){ 
				this.tabIndex = e
				this.list = []
				this.orderParams.page = 1
				this.loadList()
			},
			onReachBottom() { 
				this.loadList()
			},
			changeSite(e){
				this.nowSite = e[0] 
				this.orderTabsChange(this.tabIndex)
			},
			loadList(){
				this.loadMoreStatus = 'loading'; 
				this.orderParams.status = this.orderStatus[this.tabIndex].value
				this.$u.api.recycler.getOrderList(this.orderParams).then(res => {
					this.loadMoreStatus = 'loadmore'; 
					if(res.code != 1){
						return false
					}
					if(res.data.data == undefined || res.data.data.length <= 0){
						this.loadMoreStatus = 'nomore'; 
						return false
					} 
					this.list = [...this.list,...res.data.data]
					this.list.forEach(item =>{
						let date = new Date(item.createtime* 1000);
						let year = date.getFullYear();
						let month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以需要+1
						let day = ("0" + date.getDate()).slice(-2);
						let hours = ("0" + date.getHours()).slice(-2);
						let minutes = ("0" + date.getMinutes()).slice(-2);
						let seconds = ("0" + date.getSeconds()).slice(-2);
						item.createtime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					})
					this.orderParams.page += 1
				}).catch(err => {
					this.loadMoreStatus = 'loadmore'; 
				})
			}, 
			gotoOrderInfo(item){ 
				uni.navigateTo({
					url:"/pageA/recycler/info?recycler=1&orderId=" + item.id
				})
			},
			gotoRecycler(orderId){
				uni.navigateTo({
					url:"/pageA/recycler/form?orderId=" + orderId
				})
			},
			cancelOrder(orderId){  
				let _this = this
				uni.showModal({
					title: '提示',
					content: '每月最多可取消5次，确定取消？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						this.$u.api.recycler.cancelOrder({order_id:orderId}).then(res => {
							if(res.code == 1){
								uni.showToast({
								    title: '取消成功！',
								    icon: 'success'
								})
								setTimeout(() =>{
								_this.orderTabsChange(0)
								},1000)
							}else{
								uni.showToast({
								    title: res.msg,
								    icon: 'error'
								})
							}
						}).catch(req =>{
							uni.showToast({
							    title: '取消失败！',
							    icon: 'error'
							})
						})
						
					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})
				
			}
		},
		onShow() {
			this.list = []
			this.orderParams.page = 1
			this.loadList()
		},
		onLoad(option){
			if(option?.tabIndex){
				 this.tabIndex = option?.tabIndex
			} 
		}, 
		onReady() { 
			let _this = this
			uni.$on('orderListUpdate', function(data) { 
				_this.orderTabsChange(_this.tabIndex)
			}) 
		},
		onUnload() { 
			uni.$off('orderListUpdate') 
		}
		
	}
</script>